import React, { useEffect, useRef, useState } from 'react';
import { Button } from 'antd';
import { useHistory } from 'react-router-dom';
import { BlobProvider, PDFDownloadLink, PDFViewer } from '@react-pdf/renderer';
import { Document, Page, pdfjs } from 'react-pdf';
import { Quixote } from './Quixote';

const ReactPdfRenderer = () => {
  const history = useHistory();

  return (
    <div>
      {/* 流读取，渲染单页 */}
      {/* <BlobProvider document={<Quixote />}>
          {({ blob, url, loading, error }) => {
            // Do whatever you need with blob here
            console.log(blob, url, loading);
            if (!loading && url) return <ReactPdfDemo1 fileName={url} />;
            return <div>There's something going on on the fly</div>;
          }}
        </BlobProvider> */}
      {/* 下载 */}
      {/* <PDFDownloadLink document={<Quixote />} fileName="somename.pdf">
          {({ blob, url, loading, error }) => (loading ? 'Loading document...' : '下载PDF!')}
        </PDFDownloadLink> */}
      {/* 全部预览 */}
      <PDFViewer style={{ width: '100%', height: '60vh', overflow: 'hidden' }}>
        <Quixote />
      </PDFViewer>
    </div>
  );
};

export default ReactPdfRenderer;
